// const path = require("path");
const util = require("./util");
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Webpack = require("webpack");

const ProgressBarPlugin = require("progress-bar-webpack-plugin");

module.exports = {
  //入口
  entry: {
    app: "./src/index.tsx"
  },
  //出口
  output: {
    path: util.resolve("../dist"),
    filename: "js/[name].js",
    publicPath: "/" //打包后的资源访问路径前缀
    // chunkFilename: util.assetsPath("js/[name].[chunkhash:8].js")
  },
  //模块
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, //匹配文件
        exclude: /node-modules/, //屏蔽不需要处理的文件夹
        loader: "babel-loader?cacheDirectory=true" //loader的名称
      },
      {
        test: /\.(ts|tsx)$/, //匹配文件
        exclude: /node-modules/, //屏蔽不需要处理的文件夹
        loader: "awesome-typescript-loader?cacheDirectory=true" //loader的名称
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000, // url-loader 包含file-loader，这里不用file-loader, 小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入
          name: "static/images/[name].[hash:7].[ext]"
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000, // 小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入
          name: "static/fonts/[name].[hash:7].[ext]"
        }
      }
    ]
  },
  resolve: {
    extensions: [".js", ".json", ".jsx", ".ts", ".tsx"] // 解析扩展。（当我们通过路导入文件，找不到该文件时，会尝试加入这些后缀继续寻找文件）
    // alias: {
    //   "@": path.join(__dirname, "..", "src") // 在项目中使用@符号代替src路径，导入文件路径更方便
    // }
  },
  plugins: [
    new Webpack.DefinePlugin({
      "process.env": {
        APP_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new ProgressBarPlugin()
  ]
};
